<!-- z-paging聊天输入框 -->

<template>
  <view class="chat-tool-bar">
    <view class="cuIcon-voice margin-right" style="font-size: 28px" @click="handleSayShow"></view>
    <view class="cuIcon-emoji margin-right" style="font-size: 28px" @click="handleEmojiShow"></view>

    <ChatPicture @on-select="onImageSelect">
      <template #content>
        <view class="cuIcon-pic" style="font-size: 28px"></view>
      </template>
    </ChatPicture>
  </view>
  <view class="chat-input-bar">
    <view class="chat-input-container">
      <input class="chat-input" v-model="msg" :cursor-spacing="20"
             confirm-type="send" type="text" placeholder="请输入内容" @confirm="handleSend">
    </view>
    <view class="chat-input-send" @click="handleSend">
      <text class="chat-input-send-text">发送</text>
    </view>
  </view>
  <ChatEmoji :show="emojiShow" @on-select="onEmojiSelect"></ChatEmoji>
  <ChatSay :show="sayShow" @on-send="onVoiceSend"></ChatSay>

</template>

<script setup lang="ts">

import {ref} from "vue";
import ChatEmoji from "@/pages/common/chat/components/ChatEmoji.vue";
import ChatSay from "@/pages/common/chat/components/ChatSay.vue";
import ChatPicture from "@/pages/common/chat/components/ChatPicture.vue";

const msg = ref('')
const emits = defineEmits(['send'])
const emojiShow = ref()
const sayShow = ref()

const onImageSelect =(value:any,size:any)=>{
  emits('send', value, 3, size)
}
const onEmojiSelect = (value: any) => {
  msg.value += value
}
/**
 * 不显示直接发送 发送语音
 * @param value
 */
const onVoiceSend = (value: any, size: any) => {
  emits('send', value, 2, size)
}

const handleEmojiShow = () => {
  emojiShow.value = !emojiShow.value
  sayShow.value = false
}
const handleSayShow = () => {
  sayShow.value = !sayShow.value
  emojiShow.value = false
}

/**
 * 手动发送 信息 类型为文本
 */
const handleSend = () => {
  msg.value = msg.value.replace(/^\s*|\s*$/g, "")
  console.log(msg.value.length)
  if (!msg.value.length || msg.value === '') {
    uni.showToast({
      title: '请勿发送空白消息',
      icon: 'error'
    })
    return
  }
  emits('send', msg.value, 1, msg.value.length)
  msg.value = ''
}
</script>

<style scoped>
.chat-tool-bar{
  padding-left: 10px;
  display: flex;
  border-top: solid 1px #f5f5f5;
  background-color: #f8f8f8;
}
.chat-input-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f8f8f8;
  padding: 0px 10px;
}

.chat-input-container {
  flex: 1;
  display: flex;
  padding: 10px;
  background-color: white;
  border-radius: 10px;
}

.chat-input {
  flex: 1;
  font-size: 15px;
}

.chat-input-send {
  background-color: #007AFF;
  margin: 5px 5px 10px 10px;
  border-radius: 10px;
  padding: 8px 20px;

}

.chat-input-send-text {
  color: white;
  font-size: 16px;
}
</style>